<template>
  <div class="demo">
    <div class="demo-title">网格型内嵌卡片</div>
    <div class="demo-content">
      <Card title="Card Title">
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center" :hoverable="false">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
        <Card.Grid style="width: 25%; text-align: center">Content</Card.Grid>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Card from '@sscd/card';
</script>
